<template>
  <view class='teacherHome_box'>
    <!-- 首页图 -->
    <view class="head">
      <view class="head_logo">
        <image

          style="width: 100%;height: 100%;"
          src="../../static/index/logo2.png"
        />
        <view class="head_txt">
          <view class="txt1">{{userInfo.name}}</view>
          <view>{{userInfo.phone}}</view>
        </view>
      </view>
      
    </view>
    <!-- 搜索框 -->
    <nut-searchbar v-model="searchValue">
      <template v-slot:rightout>
        <view @tap="clickSearch" class="rightSearch">搜索</view>
      </template>
    </nut-searchbar>
   <!-- 内容 -->
   <view class="contents">
    <!-- tab切换 -->
    <nut-tabs v-model="tab1value">
      <template v-slot:titles>
        <view class="tab_title_box radius">
          <view class="title_text" v-for="(item,index) in tabTxt" :key="index" @tap="tabSelect(index)" :class="tabActive==index?'tab_active':'title_text'">{{item}}</view>
        </view>
      </template>
      <nut-tabpane class="title1" title="待处理">
        <view class="ul infiniteUl" id="scroll">
          <nut-infiniteloading
              containerId = 'scroll'
              :use-window='false'
              :has-more="hasMore"
              @load-more="loadMore"
          >
          <view
            class="li"
            v-for="item in getData"
            :key="item.id"
            v-show="item.flag?true:false"
          >
            <!-- 信息 -->
            <view class="left_box">
              <view class="p1">姓名：{{item.name}}</view>
              <view class="p1">学号：{{item.code}}</view>
              <view class="p1">院系：{{item.yuanxi}}</view>
              <view class="p1">班级：{{item.class}}</view>
              <view class="p1">联系方式：{{item.phone}}</view>
            </view>
            <!-- 按钮 -->
            <view class="right_box">
              <view class="">
                <nut-cell
                  title="审批"
                  @click="componentClick"
                ></nut-cell>
                
              </view>
            </view>
          </view>
          </nut-infiniteloading>
        </view>
      </nut-tabpane>
      <nut-tabpane class="title2" title="已处理">
        <view class="ul infiniteUl" id="scroll">
          <nut-infiniteloading
              containerId = 'scroll'
              :use-window='false'
              :has-more="hasMore"
              @load-more="loadMore"
          >
            <view
              class="li"
              v-for="item in getData"
              :key="item.id"
              v-show="item.flag==false?true:false"
            >
              <view class="left_box">
                <view class="p1">姓名：{{item.name}}</view>
                <view class="p1">学号：{{item.code}}</view>
                <view class="p1">院系：{{item.yuanxi}}</view>
                <view class="p1">班级：{{item.class}}</view>
                <view class="p1">联系方式：{{item.phone}}</view>
              </view>
              <view class="right_box2">
                <view class="text2">已完成</view>
              </view>
            </view>
          </nut-infiniteloading>
        </view>
      </nut-tabpane>
    </nut-tabs>
   </view>
   <!-- 办理弹出框 -->
   <nut-dialog
      teleport="#app"
      title="提示"
      v-model:visible="visible"
      @ok="beizhuOk"
    >
      <template v-slot:default>
        <view class="cell_title">如需备注说明,请填写备注：</view>
        <view class="beizhu">
          <nut-textarea v-model="text" />
        </view>
      </template>
    </nut-dialog>
    <!-- 退出弹出框 -->
    <nut-dialog
      teleport="#app"
      title="温馨提示"
      content="是否退出当前账号！"
      v-model:visible="visible2"
      @ok="outLogin"
    >
    </nut-dialog>
    <!-- 退出登入 -->
    <view class="out_login" @click="tuichu"></view>
  </view>
</template>
<script>
import './teacherIndex.less'
import Taro, { useRouter, getCurrentInstance } from "@tarojs/taro";

export default {
  data() {
    return {
      tab1value: '0',
      visible: false, //办理弹出框
      visible2:false, //退出弹出框
      text: '',//备注内容
      //加载参数
      hasMore:true,
      userInfo: '',//个人信息
      tabTxt: ['待处理', '已处理'],//tab标题
      tabActive: 0,//tab选中
      searchValue: "",//搜索框
      getData: [
        { id: 1, flag: true, name: '曹光1', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 2, flag: true, name: '撒撒打算', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 3, flag: false, name: '心爱的', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 4, flag: false, name: '萨芬', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 5, flag: false, name: '发的评估', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 6, flag: false, name: '都开始了', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 7, flag: false, name: '测试下', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 8, flag: false, name: '菜市场', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 9, flag: true, name: '潇洒', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 10, flag: true, name: '十大', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 11, flag: true, name: '大大我单位', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 12, flag: true, name: '啊大蛇丸', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 13, flag: true, name: '奥萨', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 14, flag: true, name: '得瑟得瑟', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 15, flag: true, name: '阿松大', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 16, flag: true, name: '创造性去', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 17, flag: true, name: '打撒打撒', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 18, flag: true, name: '倒数第二个', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 19, flag: true, name: '阿萨', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 20, flag: true, name: '阿萨大厦', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 21, flag: true, name: '按顺序撒', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
        { id: 22, flag: true, name: '达到辐射', code: '0123456', yuanxi: '材料系', class: '研1', phone: 123456789 },
      ],
    }
  },
  created() {
    this.userInfo = Taro.getStorageSync("userInfo");
    // console.log(this.userInfo,'教师个人信息');
},
mounted() {
  this.init()
},
methods: {
    //数据加载
    loadMore(done){
      console.log(done,'done');
      setTimeout(() => {
        const curLen = this.getData.length;
        for (let i = curLen; i < curLen + 5; i++) {
          this.getData.push(`${i}`);
        }
        if (this.getData.length >= 4) this.hasMore = false;
        done()
      }, 500);
    },
    init(){
      for (let i = 0; i < 5; i++) {
        this.getData.push(`${i}`);
      }
    },
    //点击搜索
    clickSearch() {
      if (this.searchValue === '') {
        //重新执行查询方法
        return false
      } else {
        // let list = this.getData.filter(item=>item.name.toString().indexOf(this.searchValue)>=0)
        // console.log(list,'list');
      }
      console.log('搜索',this.searchValue);
      
      this.searchValue = ''
    },
    //点击tab栏切换
    tabSelect(index) {
      this.tabActive = index
      this.tab1value = index
    },
    //点击审批弹出框
    componentClick() {
      this.text = ''
      this.visible = true;
    },
    //确认备注ok
    beizhuOk(){
      
    },
    //确认退出登录
    outLogin(){
      var id = this.userInfo?.["wechat_id.id"];
      let that = this;
      that.flora.dash.dataApi
        .save({
          vars: {
            model: "FreshWechat",
            values: {
              id: id,
              open_id: "",
            },
          },
        })
        .then((res) => {
          console.log("-goOut=>", res);
          if (res.result.status === "ok") {
            Taro.clearStorageSync();
            Taro.clearStorage();
            // Taro.showToast({
            //     title: '退出成功',
            //     icon: 'success',
            // })
            // Taro.showToast('退出成功', 'success')
            Taro.redirectTo({ url: "/pages/login/login" }); //退出成功页面跳转
            return;
          }
          showToast("退出失败请重试~");
        });
    },
    tuichu() {
      this.visible2 = true
    },

  }
}
</script>
<style>
</style>